<template>
  <div class="list">
    <div class="item">
      <Children 
        title-main="这是第一个"
        title-sub="副标题"
        :tab-list="data.tab_list"
        :options="data.options1"
        multiple
        @callbackTab="aaaa"
        @callbackOptions="aaaa"
      >
      dfdf
      </Children>
    </div>
    <div class="item">
      <Children 
        title-main="水果主题"
        title-sub="苹果系列"
        :tab-list="data.tab_list1"
        @callbackTab="aaaa"
      >
      sdfdsfdfsdf
      </Children>
    </div>
    <div class="item">
      <Children 
        title-main="web前端开发"
        title-sub="Vue3"
        :options="data.options_web"
        
        @callbackOptions="aaaa"
      >
      df
      </Children>
    </div>
  </div>
  <div style="height: 500px;">
  
  </div>
  <!--
  1、匿名插槽
  2、具名插槽 - 有名称的插槽
  3、作用域插槽
  -->
</template>

<script>
import { ref, reactive } from "vue";
import Children from "./children.vue"
export default {
  name: "Home",
  components: { Children },
  setup(){
    const data = reactive({
      tab_list: [
        { label: "全部", value: 'all' },
        { label: "线上", value: 'online' },
        { label: "线下", value: 'offline' },
        { label: "混合", value: 'blend' },
      ],
      tab_list1: [
        { label: "全部", value: 'all' },
        { label: "苹果", value: 'a1' },
        { label: "杨梅", value: 'a2' },
        { label: "芒果", value: 'a3' },
      ],
      options1: [
        { label: "全部", value: 'all' },
        { label: "常规的", value: 'a1' },
        { label: "优先", value: 'a3' },
      ],
      options_web: [
        { label: "全部", value: 'all' },
        { label: "初级", value: 'a1' },
        { label: "中级", value: 'a2' },
        { label: "高级", value: 'a3' },
      ],
    })

    const aaaa = (params) => {
      console.log(params)
      console.log(333)
    }
    return {
      data,
      aaaa
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  padding: 32px;
  .item {
    width: 33.33333%;
    padding: 0 16px;
    -webkit-box-sizing: border-box;
  }
}
</style>